<template>
  <div class="public-pdf">
    <div v-if="pdfFlag" class="pdf" id="myPdf">
      <!-- // ,如果不需要分页功能,只要src就可以了 -->
      <pdf
        :src="this.url"
        :page="currentPage"
        @num-pages="pageCount = $event"
        @page-loaded="currentPage = $event"
        @loaded="loadPdfHandler"
      >
      </pdf>
    </div>
    <p v-if="pdfFlag" class="arrow">
      <!-- // 上一页 -->
      <span
        @click="changePdfPage(0)"
        class="turn"
        :class="{ grey: currentPage == 1 }"
        >上一页</span
      >
      <span>{{ currentPage }} / {{ pageCount }}</span>
      <!-- // 下一页 -->
      <span
        @click="changePdfPage(1)"
        class="turn"
        :class="{ grey: currentPage == pageCount }"
        >下一页</span
      >
    </p>
    <div v-if="!pdfFlag" class="pdf-err">
      <span>PDF文件出错</span>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { pdf },
  props: {
    url: String
  },
  data() {
    //这里存放数据
    return {
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fileType: "pdf", // 文件类型
      src: "/test.pdf", // pdf文件地址
      pdfFlag: false
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    changePdfPage(val) {
      console.log('val')
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
        console.log(this.currentPage)
        document.getElementById('myPdf').scrollIntoView()
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
        console.log(this.currentPage)
        document.getElementById('myPdf').scrollIntoView()
      }
      
      
    },

    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.url == undefined || this.url == '') {
      console.log('空URL..');
    }else{
      console.log('有pdf');
      console.log(this.url);
      this.pdfFlag = true
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.loadPdfHandler();
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang='less' scoped>
/* @import url(); 引入css类 */
.public-pdf {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  position: relative;
  .pdf {
    width: 100%;
    height: 90%;
    position: relative;
    overflow: auto;
  }
  .arrow {
    width: 100%;
    height: 10%;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      font-size: 0.24rem;
      color: #555;
      margin: 0 0.3rem;
      font-weight: 700;
      user-select: none;
      cursor: pointer;
    }
  }
  .pdf-err {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      font-size: 0.3rem;
      color: #555;
    }
  }
}
</style>